<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/pear/component/pear/css/pear.css" />
    <link rel="stylesheet" type="text/css" href="/pear/my/css/style.css">
</head>
<body>
<div class="container right-panel-active">
    <!-- 注册 -->
    <div class="container__form container--signup">
        <div class="form" id="form1">
            <h2 class="form__title">注册账号</h2>
            <input type="text" id="userName" placeholder="User" class="input" />
            <input type="email" id="email" placeholder="Email" class="input" />
            <input type="password" id="password" placeholder="Password" class="input" />
            <button class="btn" id="btnRegister">点击注册</button>
        </div>
    </div>

    <!-- 登录 -->
    <div class="container__form container--signin">
        <div class="form" id="form2">
            <h2 class="form__title">欢迎登录</h2>
            <input type="email" id="name" placeholder="Username" class="input" />
            <input type="password" id="pwd" required placeholder="Password" class="input" />
            <input type="password" id="code" placeholder="Email" class="input" />
            <button class="btnCode" id="sendCode">验证</button>
            <button class="btn" id="login">登录</button>
        </div>
    </div>

    <!-- 叠加部分 -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">已有账号，直接登录</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">没有账号，点击注册</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 获取元素和点击操作
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());
</script>

<script src="/pear/component/layui/layui.js"></script>
<script src="/pear/component/pear/pear.js"></script>
<script>
    layui.use(['layer','popup','loading'], function() {
        var layer = layui.layer,
            $ = layui.jquery;
        var popup = layui.popup;
        var loading = layui.loading;

        // 点击登录
        $("#login").click(()=>{
            var name = $("#name").val();
            var pwd = $("#pwd").val();
            var code = $("#code").val();
            $.ajax({
                url:"/login/cloginAjax",//前端得选择是根据不同的人确定不同的登录方式
                type:"post",
                data:{"name":name,"pwd":pwd,"code":code},
                dataType:"json",//返回的数据类型
                success:function(data){
                    console.log(data);
                    loading.Load(5,"登陆中...");
                    loading.loadRemove(3000);
                    setTimeout(()=>{
                        window.location.href="/home/customer";
                    },3000)

                }
            })
        })
        $("#sendCode").click(()=>{
            var name = $("#name").val();
            $.ajax({//发送Ajax请求
                url:"/login/csendEmail",
                type:"post",
                data:{"name":name},
                dataType:"json",//返回的数据类型
                success:function (data) {
                }
            });
        })


        // 用户注册
        $("#btnRegister").click(()=>{
            var name = $("#userName").val();
            var eaddress = $("#email").val();
            var pwd = $("#password").val();
            console.log(name)
            $.ajax({
                url:'/register/cregister',
                data:{"name":name, "pwd":pwd, "eaddress":eaddress,"manager":"Alien"},
                success:function (data) {
                    console.log(data)
                    // 注册成功 则提示注册成功
                    if (data.info==="注册成功"){
                        popup.success("注册成功")
                    }else {
                        popup.failed("注册失败")
                    }
                    //注册失败 则提示用户名重复
                }
            })
        })

    });






</script>

</body>
</html>